import React, { useEffect } from 'react';
import { message } from 'antd';
import { useNavigate } from 'react-router-dom';

// 定义用户信息类型
interface UserInfo {
    username: string;
    email: string;
    role: string;
    display_name: string;
}

// 添加props类型
interface HomeProps {
    userInfo: UserInfo | null;
}

const HomePage: React.FC<HomeProps> = ({ userInfo }) => {
    const navigate = useNavigate();

    const navigateTo = (path: string) => {
        navigate(path);
    };

    // 添加退出登录功能
    const handleLogout = () => {
        localStorage.removeItem('access_token');
        localStorage.removeItem('token_type');
        // 清除用户信息
        sessionStorage.removeItem('userInfo');
        message.success('已退出登录');
        window.location.href = '/login';
    };

    // 组件挂载时检查登录状态
    useEffect(() => {
        const token = localStorage.getItem('access_token');
        if (!token) {
            message.error('您尚未登录或登录已过期');
            window.location.href = '/login';
        }
    }, []);

    // 检查是否登录
    const isLoggedIn = !!localStorage.getItem('access_token');

    return (
        <div className="min-h-screen bg-gray-50 p-8">
            <div className="max-w-7xl mx-auto">
                {/* 添加用户状态和退出按钮 */}
                <div className="flex justify-between items-center mb-4">
                    {/* 显示用户信息 */}
                    {userInfo && (
                        <div className="text-gray-700">
                            <span className="font-medium">欢迎，{userInfo.display_name}</span>
                            {userInfo.role && (
                                <span className="ml-2 px-2 py-1 bg-gray-100 text-xs rounded-full">
                                    {userInfo.role === 'admin' ? '管理员' : '用户'}
                                </span>
                            )}
                            {userInfo.email && (
                                <div className="text-sm text-gray-500 mt-1">
                                    {userInfo.email}
                                </div>
                            )}
                        </div>
                    )}

                    {isLoggedIn ? (
                        <button
                            onClick={handleLogout}
                            className="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                        >
                            退出登录
                        </button>
                    ) : (
                        <button
                            onClick={() => navigateTo('/login')}
                            className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        >
                            登录
                        </button>
                    )}
                </div>

                <div className="text-center mb-16 mt-8">
                    <h1 className="text-4xl font-bold text-gray-900 sm:text-5xl mb-4">智能助手</h1>
                    <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                        欢迎使用智能助手平台，探索AI的无限可能性
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {/* 主题广场卡片 */}
                    <div className="bg-white rounded-2xl shadow-sm overflow-hidden group hover:shadow-md transition-all duration-300 border border-gray-100">
                        <div className="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 p-8 flex items-center justify-center">
                            <svg
                                className="w-24 h-24 text-white opacity-90"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="1.5"
                                    d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
                                />
                            </svg>
                        </div>
                        <div className="p-6">
                            <h3 className="text-xl font-semibold text-gray-800 mb-2">主题广场</h3>
                            <p className="text-gray-600 mb-4">
                                浏览和创建文章主题，探索AI创作的无限可能。
                            </p>
                            <button
                                onClick={() => navigateTo('/topic-square')}
                                className="w-full py-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors duration-200 text-sm font-medium"
                            >
                                进入主题广场
                            </button>
                        </div>
                    </div>

                    {/* 素材中心卡片 */}
                    <div className="bg-white rounded-2xl shadow-sm overflow-hidden group hover:shadow-md transition-all duration-300 border border-gray-100">
                        <div className="h-48 bg-gradient-to-r from-emerald-500 to-teal-600 p-8 flex items-center justify-center">
                            <svg
                                className="w-24 h-24 text-white opacity-90"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="1.5"
                                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                                />
                            </svg>
                        </div>
                        <div className="p-6">
                            <h3 className="text-xl font-semibold text-gray-800 mb-2">素材中心</h3>
                            <p className="text-gray-600 mb-4">
                                管理和使用AI生成的图片、文章等素材资源。
                            </p>
                            <button
                                onClick={() => navigateTo('/material-center')}
                                className="w-full py-3 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 transition-colors duration-200 text-sm font-medium"
                            >
                                进入素材中心
                            </button>
                        </div>
                    </div>

                    {/* 新增配图中心卡片 */}
                    <div className="bg-white rounded-2xl shadow-sm overflow-hidden group hover:shadow-md transition-all duration-300 border border-gray-100">
                        <div className="h-48 bg-gradient-to-r from-sky-500 to-indigo-600 p-8 flex items-center justify-center">
                            <svg
                                className="w-24 h-24 text-white opacity-90"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="1.5"
                                    d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 018.25 20.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25A2.25 2.25 0 0113.5 8.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25h-2.25a2.25 2.25 0 01-2.25-2.25v-2.25z"
                                />
                            </svg>
                        </div>
                        <div className="p-6">
                            <h3 className="text-xl font-semibold text-gray-800 mb-2">配图中心</h3>
                            <p className="text-gray-600 mb-4">
                                为您的内容选择和管理合适的配图。
                            </p>
                            <button
                                onClick={() => navigateTo('/illustration-center')}
                                className="w-full py-3 bg-sky-600 text-white rounded-xl hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 transition-colors duration-200 text-sm font-medium"
                            >
                                进入配图中心
                            </button>
                        </div>
                    </div>

                    {/* 文章中心卡片 */}
                    <div className="bg-white rounded-2xl shadow-sm overflow-hidden group hover:shadow-md transition-all duration-300 border border-gray-100">
                        <div className="h-48 bg-gradient-to-r from-yellow-500 to-orange-600 p-8 flex items-center justify-center">
                            <svg
                                className="w-24 h-24 text-white opacity-90"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="1.5"
                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                                />
                            </svg>
                        </div>
                        <div className="p-6">
                            <h3 className="text-xl font-semibold text-gray-800 mb-2">文章中心</h3>
                            <p className="text-gray-600 mb-4">
                                查看、编辑和管理已生成的文章内容。
                            </p>
                            <button
                                onClick={() => navigateTo('/article-center')}
                                className="w-full py-3 bg-yellow-600 text-white rounded-xl hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-colors duration-200 text-sm font-medium"
                            >
                                进入文章中心
                            </button>
                        </div>
                    </div>

                    {/* 管理员才显示的人员管理入口 */}
                    {userInfo && userInfo.role === 'admin' ? (
                        <div className="bg-white rounded-2xl shadow-sm overflow-hidden group hover:shadow-md transition-all duration-300 border border-gray-100">
                            <div className="h-48 bg-gradient-to-r from-blue-500 to-violet-600 p-8 flex items-center justify-center">
                                <svg
                                    className="w-24 h-24 text-white opacity-90"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth="1.5"
                                        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
                                    />
                                </svg>
                            </div>
                            <div className="p-6">
                                <h3 className="text-xl font-semibold text-gray-800 mb-2">人员管理</h3>
                                <p className="text-gray-600 mb-4">
                                    管理系统用户，设置权限和分配角色（仅管理员可见）。
                                </p>
                                <button
                                    onClick={() => navigateTo('/user-management')}
                                    className="w-full py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200 text-sm font-medium"
                                >
                                    进入人员管理
                                </button>
                            </div>
                        </div>
                    ) : (
                        <div className="bg-white rounded-2xl shadow-sm overflow-hidden group hover:shadow-md transition-all duration-300 border border-gray-100">
                            <div className="h-48 bg-gradient-to-r from-rose-500 to-pink-600 p-8 flex items-center justify-center">
                                <svg
                                    className="w-24 h-24 text-white opacity-90"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth="1.5"
                                        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
                                    />
                                </svg>
                            </div>
                            <div className="p-6">
                                <h3 className="text-xl font-semibold text-gray-800 mb-2">个人中心</h3>
                                <p className="text-gray-600 mb-4">
                                    查看个人信息、创作记录和使用历史，管理账户设置。
                                </p>
                                <button
                                    className="w-full py-3 bg-gray-100 text-gray-500 rounded-xl hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 transition-colors duration-200 text-sm font-medium"
                                    disabled
                                >
                                    即将上线
                                </button>
                            </div>
                        </div>
                    )}
                </div>

                <div className="mt-16 text-center text-gray-500 text-sm">
                    <p>© 2025 胖虎的智能生产系统 - 版权所有</p>
                </div>
            </div>
        </div>
    );
};

export default HomePage; 